<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #header {
            height: 30px;
            width: 600px;
            margin: 10px auto;
        }

        #table {
            width: 600px;
            margin: 10px auto;
        }

        #table .tr {
            width: 600px;
            overflow: hidden;
            margin-top: 5px;
        }

        #table .tr p {
            height: 30px;
            width: 600px;
            background-color: #0b333f;
            color: #ffffff;
        }

        #table .tr p button {
            float: right;
            margin-right: 10px;
        }

        html, body {
            height: 100%;
            width: 100%;
        }

        #shadow {
            position: fixed;
            height: 100%;
            width: 100%;
            background-color: rgba(100, 200, 50, 0.3);
            left: 0;
            top: 0;
            display: none;
        }

        #box {
            width: 500px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div id="header">
    <input id="msg">
    <button id="btn">留言</button>
</div>
<div id="table">

</div>

<div id="shadow">
    <div id="box">
        <textarea id="reply" style="margin: 0px; width: 424px; height: 316px;"></textarea>
        <button id="replyBtn">回复</button>
    </div>
</div>
</body>
<script>
    var btn = document.getElementById("btn");
    var table = document.getElementById("table");
    var msgInput = document.getElementById("msg");

    var shadow = document.getElementById("shadow");
    var replyInput = document.getElementById("reply");
    var replyBtn = document.getElementById("replyBtn");

    var tr = "";

    var timer = null;

    var fn = function () {
        var maxTime = 10;

        var msg = msgInput.value;
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var strDate = year + "年" + month + "月" + day + "日";
        var div = document.createElement("div");
        // div.className = "tr";
        div.setAttribute("class", "tr");
        table.appendChild(div);

        var p1 = document.createElement("p");
        p1.innerHTML = strDate;
        div.appendChild(p1);
        var p2 = document.createElement("p");
        p2.innerHTML = msg;
        var button = document.createElement("button");
        button.innerHTML = "回复";
        p2.appendChild(button);
        div.appendChild(p2);

        button.onclick = function () {
            shadow.style.display = "block";
            tr = this.parentNode.parentNode;
        }

        btn.disabled = true;
        btn.innerHTML = "您还有10秒钟才能再次提交";
        btn.onclick = null;//移除该事件
        timer = setInterval(function () {
            maxTime--;
            btn.innerHTML = "您还有" + maxTime + "秒钟才能再次提交";
            if (maxTime == 0) {
                clearInterval(timer);
                btn.innerHTML = "留言";
                btn.disabled = false;
                btn.onclick = fn;
            }

        }, 1000);


    }



    btn.onclick =fn;
    replyBtn.onclick = function () {
        var replyMsg = replyInput.value;
        var p = document.createElement("p");
        p.innerHTML = replyMsg;
        tr.appendChild(p);
        //谁让遮罩层出来  内容就回复到哪个tr那里去
        shadow.style.display = "none";
        replyInput.value = "";
    }


</script>
</html>